<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./demo.js"></script>
    <script src="./demo.vue"></script>
    <link rel="stylesheet" href="./demo.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <metaname=”viewport”content=”width=device-width,initial-scale=1″/>
</head>
<body>

    <div id="app" class="img">
        <!-- <div>{{name}}</div> -->
        <!-- 左边方框和文字 -->
        <div class="left">
            <div class="bloke1"></div>
            <div class="bloke2"></div>
            <div class="text1">双线质量管控体</div>
            <div class="text2">力求每件产品、每个细节都尽善尽美</div>
            <div class="text3">够专业   才放心</div>
        </div>

        <div class="back">
            <div class="text4">欢迎使用</div>
            <div class="text5">系统登陆</div>
            <div class="zong1">
                <div class="textName">用户名</div>
                <div class="name">
                    <image src="./img/name.png" class="imgName"></image>
                    <input class="inName"/>
                </div>
            </div>
            <div class="zong2">
                <div class="passworld">密    码</div>
                <div class="inPass">
                    <image src="./img/passworld.png" class="imgPut"></image>
                    <input class="inName"/>
                </div>
            </div>
            <!-- 登录 -->
            <div class="loging">登陆</div>
            <!-- <wxbutton class="loging" type="0" :size="c"></wxbutton>
            <div @click="c=''">点击放大</div> -->
        </div>

    </div>


    <script type="text/javascript">

        // 定义一个名为 wxbutton 的新组件
        Vue.component('wxbutton', {
            
            //属性
            props:['type','size'],

            //数据
            data: function () {
                return {
                   
                }
            },

            computed:{
                style:function(){
                    let style = {
                    background:'#fff',
                    color:'#000',
                    width:'100px',
                    heigth:'30px',
                }

                switch(this.type){
                    case '0':
                        style.background = '#1AAD19'
                        style.color = '#fff'
                        break;
                    case '1':
                        style.background = '#ff0000'
                        style.color = '#fff'
                        break;
                    default:
                        break;
                }

                if(this.size == '0'){
                    style.width = '200px',
                    style.heigth = '30px'
                }
                else{
                    style.width = '50px',
                    style.heigth = '30px'
                }

                return style 
                }
            },

            created(){
                //确定颜色
                
            },

            //定义事件
            methods:{

            },

            //实现代码
            template: `
            <div>
                <button :style="style">登录</button>
            </div>
            `
        })
        

        var app = new Vue({
            el: '#app',
            
            //数据
            data:{              
                c:'0',
            },

            //事件
            methods:{
                
            }

        });
    </script>




</body>
</html>